/**
 * 次卡套餐的modal
 * @author: zxy
 * @update: 2017-03-14
 */

import React, {PropTypes} from 'react';
import {Modal, Form, Input, Select, Spin, Button} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

const TimesCardModal = ({
  title,
  item,
  visible,
  modalLoading,
  btnLoading,
  onCancel,
  onOkAndAdd,
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    resetFields,
  },
}) => {

  const formItemLayout = {
    labelCol: {span: 6},
    wrapperCol: {span: 14},
  };

  function handleOk() {
    validateFields((errors) => {
      if (errors) {
        return;
      }

      const formData = getFieldsValue();

      console.log(formData)

      onOk(data, () => {
        resetFields();
      });

    });
  };

  const modalOpts = {
    title,
    visible,
    width: 600,
    maskClosable: false,
    onCancel,
    footer: (
      <div>
        <Button onClick={() => {
          handleOk(onOkAndAdd)
        }} size="large" loading={btnLoading}>保存并继续添加</Button>
        <Button type="primary" onClick={() => {
          handleOk(onOk)
        }} size="large" loading={btnLoading}>保存</Button>
      </div>
    )
  }

  return (
    <Modal {...modalOpts} onOk={handleOk}>
      <Spin spinning={modalLoading} tip="加载中...">
        <Form layout='horizontal'>
          <FormItem
            {...formItemLayout}
            label="套餐名称"
            hasFeedback
          >
            {getFieldDecorator('package_name', {
              rules: [{
                type: 'string',
              }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="项目"
            hasFeedback
          >
            {getFieldDecorator('recharge_amount', {
              rules: [{
                type: 'string',
              }, {
                required: true, message: '项目未选择',
              }],
            })(
              <Select placeholder="请选择">
                <Option value="male">male</Option>
                <Option value="female">female</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="办卡价格"
            hasFeedback
          >
            {getFieldDecorator('gift_amount', {
              rules: [{
                type: 'string',
              }, {
                required: true, message: '办卡价格未填写',
              }],
            })(
              <Input addonAfter="元"/>
            )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="包含次数"
            hasFeedback
          >
            {getFieldDecorator('product_price', {
              rules: [{
                type: 'string'
              }, {
                required: true, message: '包含次数未填写',
              }],
            })(
              <Input addonAfter="次"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="售卡提成"
            hasFeedback
          >
            {getFieldDecorator('commission', {
              rules: [{
                type: 'string',
              }],
            })(
              <Input placeholder="给售卡人员的提成" addonAfter="元"/>
            )}
          </FormItem>
        </Form>
      </Spin>
    </Modal>
  );
};

TimesCardModal.propTypes = {
  title: PropTypes.any,
  visible: PropTypes.any,
  item: PropTypes.object,
};

export default Form.create()(TimesCardModal);